<template>
  <div>
    <TableShow :head="headData" :data="data" v-bind="$attrs" />
    <van-pagination
      v-if="isPage"
      :value="current"
      :total-items="total"
      :items-per-page="size"
      @change="handleCurrentChange"
    />
  </div>
</template>


<script>
import { comMixin } from "../../../utils/comMixins";
import TableShow from "../components/tableShow";

export default {
  name: "phone-form-table",
  mixins: [comMixin],
  components: {
    TableShow,
  },
  props: {
    // 分页配置
    pagination: {
      type: Object,
      default: () => {},
    },
    // 是否分页
    isPage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      total: 0,
      data: [],
      current: 1,
      size: 10,
    };
  },
  computed: {
    headData() {
      return this.dataObj.head;
    },
  },
  methods: {
    // 请求数据
    handleSuccess(data) {
      // 分页的情况
      this.data = data[this.props.records || "records"];
      this.total = data[this.props.total || "total"];
      this.current =
        parseInt(data[this.props.current || "current"]) || this.current;
      this.size = parseInt(data[this.props.size || "size"]) || this.size;
    },
    handleError(err) {
      this.data = [];
    },
    handleSizeChange(val) {
      this.current = 1;
      this.size = val;
      const queryForm = {};
      queryForm[this.props.current] = this.current;
      queryForm[this.props.size] = this.size;
      this.loadData(queryForm);
    },
    handleCurrentChange(val) {
      this.current = val;
      const queryForm = {};
      queryForm[this.props.current] = this.current;
      queryForm[this.props.size] = this.size;
      this.loadData(queryForm);
    },
  },
};
</script>

<style lang="scss" scoped>
.Fg-pho-table {
  .Fg-pho-table__header {
    color: #909399;
  }
  .Fg-pho-table__cell {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    border-bottom: 1px solid #ebeef5;
  }
  .Fg-pho-table--striped {
    background-color: #fafafa;
  }
}
.Fg-pho-table--border {
  .Fg-pho-table__header {
    .Fg-pho-table__cell {
      border-top: 1px solid #ebeef5;
    }
  }

  .Fg-pho-table__header,
  .Fg-pho-table__body {
    .Fg-pho-table__cell {
      border-left: 1px solid #ebeef5;
    }
    .Fg-pho-table__cell:last-child {
      border-right: 1px solid #ebeef5;
    }
  }
}
.Fg-pho-table--mini {
  font-size: 12px;
  .Fg-pho-table__cell {
    padding: 6px 0;
  }
}
.Fg-pho-table--small {
  font-size: 12px;
  .Fg-pho-table__cell {
    padding: 8px 0;
  }
}
.Fg-pho-table--medium {
  font-size: 14px;
  .Fg-pho-table__cell {
    padding: 10px 0;
  }
}
</style>